<template>
  <div class="sq-left-bottom d-flex-c">
    <div class="panel-header-bg flex-0">
      <div class="title-text">
        旱情信息
      </div>
    </div>
    <div class="flex-between panel-zone-big-bg left-top full-height">
      <div class="panel-zone-bg m-r-mini flex-1 full-height">
        <div class="little-title flex-between">
          连续无雨日
          <SwitchTab
            :tab-list="lowWaterTabList"
            v-model="lowWaterTab"
          />
        </div>
        <div class="flex-1">
          <BKChart
            :option="noRainyOptions"
          />
        </div>
      </div>
      <div class="panel-zone-bg flex-0 low-water-alarm full-height">
        <div class="little-title flex-between m-b-tiny">
          枯水告警
          <span class="c-text-blue f-12">今日以来</span>
        </div>
        <div
          class="d-flex-c flex-1"
          v-loading="loading"
        >
          <div class="flex-1">
            <BKChart
              :option="pieOptions"
            />
          </div>
          <div class="flex-0 pie-legend-box">
            <div
              v-for="(legend,index) in pieChartConfig"
              :key="index"
              class="flex-between pie-legend full-width"
            >
              <div class="flex-ai-c">
                <div
                  class="color-rect "
                  :style="{color:legend.color}"
                />
                <span class="f-12 c-white">
                  {{ legend.name }}
                </span>
              </div>

              <div class="t-nowrap">
                <span
                  class="f-20 ff-agencyyr f-w7 c-pointer"
                  :style="{color:legend.color}"
                  @click="showReverseCheck(legend.field)"
                >
                  {{ pieChartData[legend.field] }}
                </span>
                <span
                  class="f-12 c-white legend-unit"
                >
                  个
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <DetailModal
      v-if="detailVisible"
      :visible="detailVisible"
      :columns="columns"
      :static-data="detailData"
      @close="detailVisible=false"
      width="1085px"
    />
  </div>
</template>

<script>
import SwitchTab from '@/views/business/ysqjcdp/components/switch-tab.vue'
import { getBarOption, getRingOption, verticalXAXisLabel } from '@/components/chart/echart-utils'
import DetailModal from '@/views/business/ysqjcdp/components/modal/detail-modal.vue'
// getPie3D
export default {
  name: 'SqLeftBottom',
  components: { SwitchTab, DetailModal },
  data () {
    this.pieChartConfig = [
      { name: '河道', color: '#2AA0FF', field: 'hd', opacity: 0.5 },
      { name: '水库', color: '#0AC2D3', field: 'sk', opacity: 0.7 }
    ]
    this.lowWaterTabList = [
      { label: '近10天', value: '1' },
      { label: '30天', value: '2' },
      { label: '45天', value: '3' },
      { label: '60天', value: '4' }
    ]
    return {
      month: '2024-03',
      lowWaterTab: '1',
      pieChartData: {},
      pieOptions: null,
      noRainyOptions: null,
      loading: false,
      dryWaterData: null, // 枯水告警数据
      detailVisible: false,
      columns: [
        { title: '站码', field: 'stcd', width: 80 },
        { title: '测站名称', field: 'stnm', width: 100, align: 'left' },
        { title: '当前水位', field: 'z', width: 90 },
        { title: '旱警水位', field: 'ddz', width: 90, align: 'center' },
        { title: '站址', field: 'stlc', minWidth: 80, align: 'center' },
        { title: '站类', field: 'sttp', width: 80, align: 'center' },
        { title: '所属行政区名', field: 'city', width: 120, align: 'center' },
        { title: '经度', field: 'lgtd', width: 80, align: 'center' },
        { title: '纬度', field: 'lttd', width: 80, align: 'center' }
      ],
      detailData: []
    }
  },
  computed: {
    pieTotal () {
      const total = this.pieChartConfig.reduce((pre, cur) => {
        return pre + this.pieChartData[cur.field]
      }, 0)
      return total
    }
  },
  watch: {
    lowWaterTab: {
      immediate: true,
      handler () {
        this.setNoRainyOptions()
      }
    }
  },
  async mounted () {
    this.setPieOptions()
  },
  methods: {
    async  setPieOptions () {
      this.loading = true
      const btime = this.$utils.createDate().format('YYYY-MM-DD')
      const etime = this.$utils.createDate().format('YYYY-MM-DD HH:mm:ss')
      const data = await this.$request.formDataPost(window.outApiHw + 'hw-api/outInterface/selectLowWaterAlarm',
        {
          btime: btime + ' 08:00:00',
          etime: etime
        })
      this.dryWaterData = data
      this.pieChartData = {
        hd: data.reduce((pre, cur) => {
          return pre + Number(cur.drkCount)
        }, 0),
        sk: data.reduce((pre, cur) => {
          return pre + Number(cur.dryCount)
        }, 0)
      }

      // const total = Number(this.pieChartData.hd) + Number(this.pieChartData.sk)
      // const threedOption = getPie3D(this.pieChartConfig.map((r, i) => {
      //   const value = this.pieChartData[r.field]
      //   return {
      //     name: r.name,
      //     // 高度，数据占比乘以系数得到
      //     value: value * 2 / total,
      //     raw: value,
      //     percentage: Math.round(value * 100 / total),
      //     color: r.color
      //   }
      // }))
      // threedOption.tooltip.formatter = (params) => {
      //   if (params.seriesName !== 'mouseoutSeries') {
      //     const pieData = threedOption.series[params.seriesIndex].pieData
      //     return `${params.seriesName}<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>${pieData.raw} 个`
      //   }
      // }
      // console.log({ threedOption })
      // this.pieOptions = threedOption
      // 环状
      const result = getRingOption({
        color: this.pieChartConfig.map(item => item.color),
        data: this.pieChartConfig.map(item => {
          return {
            name: item.name,
            value: this.pieChartData[item.field] ?? 0
          }
        })
      })
      result.series[0].radius = ['94%', '93%']
      result.series[1].radius = ['91%', '90%']
      result.series[2].radius = ['78%', '82%']
      this.pieOptions = result
      this.loading = false
    },
    async setNoRainyOptions () {
      const data = await this.$request.formDataPost(window.outApiHw + 'hw-api/outInterface/selectNoRain', {
        type: this.lowWaterTab
      })

      const result = getBarOption({
        yAxisName: '天数',
        xAxis: data.map(r => r.name),
        series: [
          {
            name: '连续无雨天数',
            type: 'bar',
            color: ['#0382FC00', '#0382fc'],
            data: data.map(r => r.day)
          }
        ]
      })
      if (!data.length) {
        result.grid.left = 20
      }
      result.grid.bottom = -6
      result.series[0].itemStyle.borderRadius = [12, 12, 0, 0]
      result.series[0].barMaxWidth = 12
      result.xAxis.axisLabel.color = '#FFFFFF'
      result.yAxis.axisLabel.color = '#FFFFFF'
      result.xAxis.axisLine = {
        show: true,
        lineStyle: {
          color: 'rgba(233,237,240,0.1)'
        }
      }
      result.xAxis.axisLabel.interval = 0
      result.xAxis.axisLabel.formatter = verticalXAXisLabel
      result.yAxis.splitLine.show = false
      result.yAxis.axisLine = {
        show: true,
        lineStyle: {
          color: 'rgba(233,237,240,0.1)'
        }
      }
      result.yAxis.nameTextStyle = {
        color: '#C4CBD9',
        fontSize: '14px',
        padding: [0, 0, 0, -20]
      }
      result.tooltip.appendToBody = true
      this.noRainyOptions = result
    },
    showReverseCheck (field) {
      this.detailVisible = true
      this.detailData = this.dryWaterData.reduce((pre, cur) => {
        const temp = field === 'hd' ? cur.drkStation : cur.dryStation
        return pre.concat(temp)
      }, [])
    }
  }
}
</script>

<style lang="scss" scoped>
.low-water-alarm {
  width: 220px;
}

.sq-left-bottom {
  max-height: 330px;
  min-height: 270px;
}

.pie-legend-box {
  height: 60px;
  padding: 10px  30px;

  .pie-legend {
    .color-rect {
      position: relative;
      width: 10px;
      height: 10px;
      background-color: currentcolor;
      margin-right: 15px;
    }
  }
}

</style>
